<template>
  <div class="card QuickMenu">
    <el-row>
      <el-col :span="2" v-for="i in auth" :key="i.auth_id" v-show="$check_action(i.path)">
        <el-button :type="i.Bgcolor" :icon="i.Icon" size="large" class='MenuIcon' @click="moreBtn('/home' + i.path)"/>
        <p class='Menutext'>{{ i.mod_name + "管理" }}</p>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Search,
    Edit,
  } from "@element-plus/icons-vue";
  import {
          $check_action
  } from "@/utils/utils.js";
  import {useRouter, useRoute,} from "vue-router";
  import {ElMessage} from "element-plus";
  import {ref, watch, computed, onMounted} from "vue";
  import storageHelper from "@/libs/StorageHelper";
  let router = useRouter();
  let route = useRoute();
  let user_group = storageHelper.getGroupValue();
  const auth = computed(() => {
    let tables = JSON.parse(window.localStorage.getItem("set_auth"));
    let lt = [];
    let site_list = [];
    let colorArr = ["success", "primary", "info", "warning", "danger"];
    let IconArr = ["Edit", "Document", "Menu", "Location", "Setting", "Search"];
                site_list.push("i_want_to_customize_it")
                let list = [
      "exam",
      "article",
      "article_type",
      "comment",
,
      "goods",
      "order",
          "logistics_delivery",
          "forum",
      "forum_type",
      "notice",
      "message",
      "subject",
      "exam_question_database",
      "subject_exam",
      "user_answer_wrong",
    ];
                            list.push("fresh_products");
                                                                              list.push("registered_user");
        list.push("merchant_users");
                        for (let i = 0; i < tables.length; i++) {
      let o = tables[i];
      if (o.path.indexOf("/table") !== -1) {
        if (list.indexOf(o.table_name) === -1) {
          o.has_add = site_list.indexOf(o.table_name) === -1;
          o.Bgcolor = colorArr[parseInt(Math.random() * colorArr.length)]
          o.Icon = IconArr[parseInt(Math.random() * IconArr.length)]
          lt.push(o);
        }
      }
    }

    return lt;
  });
  let moreBtn = (path) => {
    router.push(path)
  }
  onMounted(() => {

  })

</script>

<style scoped lang='less'>
  .QuickMenu {
    text-align: center;
    display: block;
    width: 100%;
    // height: 120px;
    position: relative;

    .MenuIcon {
      width: 80px;
      height: 80px;
      font-size: 30px;
      padding: 1.5rem;
    }

    .Menutext {
      font-size: 18px;
      padding-top: 8px;

    }
  }
</style>